<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>消息中心</title>
    <link th:href="@{${skinPath} + '/css.css'}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/lte/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet"/>
    <style>
        .un-readed {
            font-weight: bold;
        }

        .search-form input, select {
            vertical-align: middle;
        }

        .search-form input:not([type="radio"]):not([type="button"]) {
            width: 80px;
            line-height: 20px; /*否则输入框的文字会偏下*/
        }
    </style>
    <script src="../inc/common.js"></script>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery-migrate-1.2.1.min.js"></script>
    <script src="../js/jquery-alerts/jquery.alerts.js" type="text/javascript"></script>
    <script src="../js/jquery-alerts/cws.alerts.js" type="text/javascript"></script>
    <link href="../js/jquery-alerts/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen"/>

    <link href="../js/jquery-showLoading/showLoading.css" rel="stylesheet" media="screen"/>
    <script type="text/javascript" src="../js/jquery-showLoading/jquery.showLoading.js"></script>
    <script type="text/javascript" src="../js/jquery.toaster.js"></script>

    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../js/soul-table/soulTable.css" media="all">
    <script src="../js/layui/layui.js" charset="utf-8"></script>

    <script th:inline="javaScript">
        function selAllCheckBox(checkboxname) {
            var checkboxboxs = document.getElementsByName(checkboxname);
            if (checkboxboxs != null) {
                // 如果只有一个元素
                if (checkboxboxs.length == null) {
                    checkboxboxs.checked = true;
                }
                for (i = 0; i < checkboxboxs.length; i++) {
                    checkboxboxs[i].checked = true;
                }
            }
        }

        function deSelAllCheckBox(checkboxname) {
            var checkboxboxs = document.getElementsByName(checkboxname);
            if (checkboxboxs != null) {
                if (checkboxboxs.length == null) {
                    checkboxboxs.checked = false;
                }
                for (i = 0; i < checkboxboxs.length; i++) {
                    checkboxboxs[i].checked = false;
                }
            }
        }
    </script>
    <style>
        .loading {
            display: none;
            position: fixed;
            z-index: 1801;
            top: 45%;
            left: 45%;
            width: 100%;
            margin: auto;
            height: 100%;
        }

        .SD_overlayBG2 {
            background: #FFFFFF;
            filter: alpha(opacity=20);
            -moz-opacity: 0.20;
            opacity: 0.20;
            z-index: 1500;
        }

        .treeBackground {
            display: none;
            position: absolute;
            top: -2;
            left: 0;
            width: 100%;
            margin: auto;
            height: 200%;
            background-color: #EEEEEE;
            z-index: 1800;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        i {
            margin-right: 5px
        }

        .search-form input, select {
            vertical-align: middle;
        }

        .search-form select {
            width: 80px;
        }

        .search-form input:not([type="radio"]):not([type="button"]):not([type="checkbox"]) {
            width: 80px;
            line-height: 20px; /*否则输入框的文字会偏下*/
        }

        .page-main {
            margin: 10px 15px 0 15px;
        }
    </style>
</head>
<body>
<div id="treeBackground" class="treeBackground"></div>
<div id='loading' class='loading'><img src='../images/loading.gif'></div>
<th:block th:if="${isNav}">
<div th:replace="th/include/tab_sys_message :: nav(${isRecycle==1?2:1})"></div>
<div class="spacerH"></div>
</th:block>
<div class="page-main">
    <div id="searchFormBox" class="search-form-box">
        <form id="searchForm" name="searchForm" class="search-form" method="get">
            <div class="layui-inline">
                类型
                <select id="actionType" name="actionType">
                    <option value=""></option>
                    <option th:each="json : ${actionTypes}" th:value="${json.type}">[(${json.name})]</option>
                </select>
                按
                <select id="kind" name="kind">
                    <option value=""></option>
                    <option value="title" selected>标题</option>
                    <option value="content">内容</option>
                    <option value="notreaded">未读消息</option>
                </select>
                <script th:inline="javascript">
                    $(function () {
                        o("actionType").value = "[(${actionType})]";
                    })
                </script>
                &nbsp;
                <input type="text" name=what size=20 value=""/>
                <input name="isRecycle" type="hidden" th:value="${isRecycle}"/>
                <input name="action" value="search" type="hidden"/>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">搜索</button>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
    <script type="text/html" id="toolbar_list">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="readed" title="已读"><i class="fa fa-envelope-o"></i>已读</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="unreaded" title="未读"><i class="fa fa-envelope"></i>未读</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i>删除</button>
            <button th:if="${isRecycle}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="restore" title="恢复"><i class="fa fa-reply"></i>恢复</button>
        </div>
    </script>
    <script type="text/html" id="operateBar">
        <a class="layui-btn layui-btn-xs" lay-event="showMsg">查看</a>
    </script>
</div>
<script th:inline="javascript">
    var tableData;
    layui.config({
        base: '../js/',   // 第三方模块所在目录
        // version: 'v1.6.2' // 插件版本号
    }).extend({
        soulTable: 'soul-table/soulTable',
        tableChild: 'soul-table/tableChild',
        tableMerge: 'soul-table/tableMerge',
        tableFilter: 'soul-table/tableFilter',
        excel: 'soul-table/excel',
    });

    layui.use(['table', 'soulTable'], function () {
        var table = layui.table;
        var soulTable = layui.soulTable;

        table.render({
            elem: '#table_list'
            , toolbar: '#toolbar_list'
            , defaultToolbar: ['filter', 'print'/*, 'exports', {
				title: '提示'
				,layEvent: 'LAYTABLE_TIPS'
				,icon: 'layui-icon-tips'
			}*/]
            , drag: {toolbar: true}
            , method: 'post'
            , url: '../message_oa/sysMessageList.do?isRecycle=[(${isRecycle})]'
            , where: {
                action: '[(${action})]',
                actionType: '[(${actionType})]'
            }
            , cols: [
                [{type: 'checkbox', fixed: 'left'}
                    , {field: 'title', align: 'left', width: 500, title: '标题', sort: true}
                    , {field: 'sender', width: 150, title: '发布者', sort: true}
                    , {field: 'kind', width: 150, title: '类型', sort: false}
                    , {field: 'send_time', width: 200, title: '日期', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#operateBar', width: 150}
                ]
            ]
            , id: 'tableList'
            , page: true
            , unresize: false
            , limit: 50
            , height: 'full-68'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.errCode, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , done: function (res, curr, count) {
                // alert("res==================",res,res.data);
                tableData = res.data;
                soulTable.render(this);
            }
        });

        // 头工具栏事件
        table.on('toolbar()', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'unreaded':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = '' + json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }
                    setUnReaded(ids);
                    break;
                case 'readed':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = '' + json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }
                    setReaded(ids);
                    break;
                case 'del':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }

                    var isRecycle = [(${isRecycle})];
                    if (isRecycle) {
                        layer.confirm('您确定要彻底删除么？', {icon: 3, title: '提示'}, function (index) {
                            $.ajax({
                                type: "post",
                                url: "del.do",
                                data: {
                                    ids: ids
                                },
                                dataType: "html",
                                beforeSend: function (XMLHttpRequest) {
                                    $("body").showLoading();
                                },
                                success: function (data, status) {
                                    data = $.parseJSON(data);
                                    layer.msg(data.msg, {
                                        offset: '6px'
                                    });
                                    if (data.ret == 1) {
                                        refresh();
                                    }
                                },
                                complete: function (XMLHttpRequest, status) {
                                    $("body").hideLoading();
                                },
                                error: function (XMLHttpRequest, textStatus) {
                                    // 请求出错处理
                                    alert(XMLHttpRequest.responseText);
                                }
                            });
                            layer.close(index);
                        });
                    }
                    else {
                        layer.confirm('您确定要删除么？', {icon: 3, title: '提示'}, function (index) {
                            $.ajax({
                                type: "post",
                                url: "delToDustbin.do",
                                data: {
                                    ids: ids
                                },
                                dataType: "html",
                                beforeSend: function (XMLHttpRequest) {
                                    $("body").showLoading();
                                },
                                success: function (data, status) {
                                    data = $.parseJSON(data);
                                    layer.msg(data.msg, {
                                        offset: '6px'
                                    });
                                    if (data.ret == 1) {
                                        refresh();
                                    }
                                },
                                complete: function (XMLHttpRequest, status) {
                                    $("body").hideLoading();
                                },
                                error: function (XMLHttpRequest, textStatus) {
                                    // 请求出错处理
                                    alert(XMLHttpRequest.responseText);
                                }
                            });
                            layer.close(index);
                        });
                    }
                    break;
                case 'restore':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = '' + json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }
                    $.ajax({
                        type: "post",
                        url: "../message_oa/restore.do",
                        contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
                        data: {
                            ids: ids
                        },
                        dataType: "html",
                        beforeSend: function (XMLHttpRequest) {
                            $('body').showLoading();
                        },
                        success: function (data, status) {
                            data = $.parseJSON(data);
                            layer.msg(data.msg, {
                                // icon: 1,
                                offset: '6px',
                                time: 2000 // 2秒关闭（如果不配置，默认是3秒）
                            }, function() {
                                refresh();
                            });
                        },
                        complete: function (XMLHttpRequest, status) {
                            $('body').hideLoading();
                        },
                        error: function (XMLHttpRequest, textStatus) {
                            // 请求出错处理
                            jAlert(XMLHttpRequest.responseText, "提示");
                        }
                    });
                    break;
            }
        });

        $('.search-form .layui-btn').on('click', function (e) {
            e.preventDefault();
            table.reload('tableList', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: $('.search-form').serializeJsonObject()
            }, 'data');
        });

        //监听表格排序问题
        table.on('sort()', function (obj) { //注：sort lay-filter="对应的值"
            table.reload('tableList', { //testTable是表格容器id
                initSort: obj // 记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: {
                    orderBy: obj.field //排序字段
                    , sort: obj.type //排序方式
                }
            });
        });

        //监听行工具事件
        table.on('tool(table_list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'showMsg') {
                addTab('消息', 'message_oa/sysMessageShowPage.do?id=' + data.id);
            }
        });
    });

    $.fn.serializeJsonObject = function () {
        var json = {};
        var form = this.serializeArray();
        $.each(form, function () {
            if (json[this.name]) {
                if (!json[this.name].push) {
                    json[this.name] = [json[this.name]];
                }
                json[this.name].push();
            } else {
                json[this.name] = this.value || '';
            }
        });
        return json;
    }

    function refresh() {
        layui.table.reload('tableList');
    }

    function setReaded(ids) {
        $.ajax({
            type: "post",
            url: "../message_oa/setReaded.do",
            contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
            data: {
                ids: ids,
                isReaded: true,
                isSys: true
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
                $('body').showLoading();
            },
            success: function (data, status) {
                data = $.parseJSON(data);
                var ary = ids.split(",");
                for (i = 0; i < ary.length; i++) {
                    $('#title' + ary[i]).removeClass('un-readed');
                }
                layer.msg(data.msg, {
                    offset: '6px',
                });
            },
            complete: function (XMLHttpRequest, status) {
                $('body').hideLoading();
            },
            error: function (XMLHttpRequest, textStatus) {
                // 请求出错处理
                jAlert(XMLHttpRequest.responseText, "提示");
            }
        });
    }

    function setUnReaded(ids) {
        $.ajax({
            type: "post",
            url: "../message_oa/setReaded.do",
            contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
            data: {
                ids: ids,
                isReaded: false
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
                $('body').showLoading();
            },
            success: function (data, status) {
                data = $.parseJSON(data);
                var ary = ids.split(",");
                for (i = 0; i < ary.length; i++) {
                    $('#title' + ary[i]).addClass('un-readed');
                }
                layer.msg(data.msg, {
                    offset: '6px',
                });
            },
            complete: function (XMLHttpRequest, status) {
                $('body').hideLoading();
            },
            error: function (XMLHttpRequest, textStatus) {
                // 请求出错处理
                jAlert(XMLHttpRequest.responseText, "提示");
            }
        });
    }
</script>
</body>
</html>